<template>
   <div>
        <MusicHotSearch id="MusicHotSearch" class="flex" v-if="ContentState==0 || ContentState==1"/>
        <MusicSearchTips v-else-if="ContentState==3" id="MusicSearchTips"/>
        <MusicSearchResult v-else-if="ContentState==4" id="MusicSearchResult"/>
         <MusicProgress v-else-if="ContentState==7 && PlayNow" id="MusicProgress" class="flex"/>
        <MusicState v-else id="MusicState" class="flex"/>

   </div>
</template>
<script>
import { mapState } from 'vuex'
import MusicHotSearch from './MusicHotSearch/MusicHotSearch.vue'
import MusicProgress from './MusicProgress/MusicProgress.vue'
import MusicSearchResult from './MusicSearchResult/MusicSearchResult.vue'
import MusicSearchTips from './MusicSearchTips/MusicSearchTips.vue'
import MusicState from './MusicState/MusicState.vue'
  export default 
  {
     components: { MusicHotSearch, MusicSearchTips, MusicState, MusicSearchResult, MusicProgress },
     name :'', 
     computed:{
        ...mapState('Music',['ContentState','PlayNow'])
     }
  }
</script>
<style scoped lang='less'>
#MusicHotSearch,#MusicSearchTips,#MusicSearchResult{
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 5px;
   
}
#MusicState,#MusicProgress{
   width: 100%;
   height: 100%;
   position: relative;
}
</style>